<template>
	<div>
		<ul id="icon-list" class="icon-list">
			<li>
				<span>
					<i class="iconfont iconshouye01-01"></i>
					<span class="icon-name">iconshouye01-01</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont icondianpu"></i>
					<span class="icon-name">icondianpu</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconchanpin"></i>
					<span class="icon-name">iconchanpin</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconquanbudingdan"></i>
					<span class="icon-name">iconquanbudingdan</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconyonghu"></i>
					<span class="icon-name">iconyonghu</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconshuju"></i>
					<span class="icon-name">iconshuju</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconyingyong"></i>
					<span class="icon-name">iconyingyong</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconxitongshezhi"></i>
					<span class="icon-name">iconxitongshezhi</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconrizhi"></i>
					<span class="icon-name">iconrizhi</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconfenxiao"></i>
					<span class="icon-name">iconfenxiao</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconjifen"></i>
					<span class="icon-name">iconjifen</span>
				</span>
			</li>
			<li>
				<span>
					<i class="iconfont iconweixin"></i>
					<span class="icon-name">iconweixin</span>
				</span>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		get_icon(li) {
			this.$emit('getIconfont', {
				icon: li.querySelector('.icon-name').innerText
			});
		}
	},
	mounted() {
		let lis = document.querySelectorAll('#icon-list li');
		let _this = this;
		lis.forEach(ele => {
			ele.addEventListener('click', function() {
				_this.get_icon(this);
			});
		});
	}
};
</script>

<style>
ul.icon-list {
	overflow: hidden;
	list-style: none;
	padding: 0 !important;
	border: 0.0625rem solid #eaeefb;
	border-radius: 0.25rem;
}

.icon-list li {
	float: left;
	width: calc(16.6667% - 1px);
	text-align: center;
	height: 7.5rem;
	line-height: 7.5rem;
	color: #666;
	font-size: 0.8125rem;
	border-right: 0.0625rem solid #eee;
	border-bottom: 0.0625rem solid #eee;
	margin-right: -0.0625rem;
	margin-bottom: -0.0625rem;
}

.icon-list li:nth-child(6n) {
	width: calc(16.6667% + 2px);
	border-right: 0;
}

.icon-list li:after {
	content: '';
	height: 100%;
}

.icon-list li:after,
.icon-list li span {
	display: inline-block;
	vertical-align: middle;
}

.icon-list li span {
	line-height: normal;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	color: #99a9bf;
	transition: color 0.15s linear;
}

.icon-list li i {
	display: block;
	font-size: 2rem;
	margin-bottom: 0.9375rem;
	color: #606266;
	transition: color 0.15s linear;
}

.icon-list li .icon-name {
	display: inline-block;
	padding: 0 0.1875rem;
	height: 1em;
}

.icon-list li:hover i,
.icon-list li:hover span {
	color: #ff6a6c;
	cursor: pointer;
}
</style>
